<template>
  <div class="pageBox">
    <head-component title="我的地址"></head-component>
    <div class="noAddress flex-center" v-if="list.length == 0">
      <img src="@/image/my/noAddress.png" alt="" />
      <p>还没有添加收货地址，快去添加吧~</p>
    </div>

    <div class="list" v-else>
      <div
        class="listItem"
        v-for="item in list"
        :key="item.id"
        @click="switchChange(item.id)"
      >
        <div class="nameBox flex-row">
          <p>{{ item.name }}</p>
          <span>{{ item.mobile }}</span>
        </div>
        <div class="address">
          {{ item.province }}{{ item.city }}{{ item.area }}{{ item.address }}
        </div>
        <div class="bom flex-between">
          <div class="left flex-row">
            <button @click.stop="onDelete(item)">删除</button>
            <div>丨</div>
            <button @click.stop="edit(item)">编辑</button>
          </div>
          <div class="right flex-row">
            <p>{{ item.checked ? "默认地址" : "设为默认地址" }}</p>
            <van-switch
              v-model="item.checked"
              size="22px"
              active-color="#ee0a24"
              @click.stop="switchChange(item.id)"
            />
          </div>
        </div>
      </div>
    </div>

    <button class="addAddrBtn" @click="onAddAddrBtn">添加收货地址</button>
  </div>
</template>

<script type="text/ecmascript-6">
import { Dialog, Toast } from "vant";
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const list = ref([]);
    const addNum = ref(router.currentRoute.value.query.addNum ? router.currentRoute.value.query.addNum : "");

    function onLoad() {
      post("/portal", {
        module: "User",
        interface: "6000",
      }).then((res) => {
        console.log(res);
        let datas = res.data;
        datas.forEach((item) => {
          if (item.status == 1) {
            item.checked = true;
            localStorage.setItem("addressId", item.id);
          } else {
            item.checked = false;
          }
        });
        list.value = datas;
      });
    }
    onLoad();

    // 设置默认地址
    function switchChange(id) {
      post("/portal", {
        loading: true,
        module: "User",
        interface: "6003",
        data: {
          id: id,
        },
      }).then(() => {
        if (!addNum.value) {
          Toast("设置成功");
          onLoad();
        } else {
          Toast("设置成功");
          onLoad();
          setTimeout(() => {
            localStorage.setItem("addressId", id);
            router.go(-1);
          }, 1000);
        }
      });
    }

    function onAddAddrBtn() {
      router.push({
        path: "/addAddr",
      });
    }

    function onDelete(param) {
      Dialog.confirm({
        title: "提示",
        message: "确定要删除该地址嘛？",
      })
        .then(() => {
          // on confirm
          post("/portal", {
            module: "User",
            interface: "6002",
            data: {
              id: param.id,
            },
          }).then(() => {
            Toast("删除成功");
            setTimeout(() => {
              onLoad();
            }, 1500);
          });
        })
        .catch(() => {
          // on cancel
        });
    }

    function edit(param) {
      router.push({
        path: "/addAddr",
        query: {
          id: param.id,
        },
      });
    }

    return {
      list,
      addNum,
      onLoad,
      switchChange,
      onAddAddrBtn,
      onDelete,
      edit,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  padding-top: 88px;
  background-color: #f5f5f5;
  .noAddress {
    flex-direction: column;
    padding-top: 105px;
    img {
      width: 360px;
      height: 309px;
    }
    p {
      font-size: 26px;
      font-weight: 400;
      color: #999999;
      margin-top: 10px;
    }
  }
  .addAddrBtn {
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    width: 92%;
    height: 88px;
    background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
    border-radius: 16px;
    display: block;
    margin: 140px auto 0;
    border: none;
  }
  .list {
    padding: 0 30px;
    .listItem {
      margin-top: 20px;
      width: 100%;
      height: 260px;
      background: #ffffff;
      box-shadow: 0px 4px 12px 0px rgba(223, 207, 207, 0.5);
      border-radius: 20px;
      padding: 30px;
      .nameBox {
        p {
          font-size: 32px;
          font-weight: 500;
          color: #333333;
          margin-right: 31px;
        }
        span {
          font-size: 28px;
          font-weight: 400;
          color: #999999;
        }
      }
      .address {
        font-size: 24px;
        font-weight: 400;
        color: #999999;
        margin-top: 10px;
      }
      .bom {
        margin-top: 64px;
        .left {
          button {
            border: none;
            background-color: transparent;
            font-size: 26px;
            font-weight: 400;
            color: #999999;
          }
          div {
            border: none;
            background-color: transparent;
            font-size: 26px;
            font-weight: 400;
            color: #999999;
          }
        }
        .right {
          p {
            font-size: 26px;
            font-weight: 400;
            color: #333333;
            margin-right: 20px;
          }
        }
      }
    }
  }
}
</style>